<template>
	<view class="goutong" :style="{'width':windowWidth +'px'}">
		<baseHead :showReturn="true" title="沟通过" bg="#fff" color="#000" :right="false"></baseHead>
		<view v-if="datalist">
			<scroll-view :scroll-y='true' :style="{'height':windowHeight-50-statusBarH+'px'}" 
			:refresher-threshold="10" @scrolltolower="ReachBottom" :lower-threshold='50'
			refresher-enabled="true" :refresher-triggered="triggered" @refresherrefresh="onRefresh"
			@refresherrestore="onRestore" refresher-default-style="none" >
				<u-loading-icon :show="triggered" text="正在刷新" style="padding-top: 10rpx;"></u-loading-icon>
			<view class="jiaonliguanli" v-for="(item, index) in datalist" :key="index">
				<view class="view-layout" @click="JobDetails(item)" v-if="item.JobInfo">
					<view class="view-right-top">
						<view>
							<view class="name">{{ item.JobName }}</view>

						</view>
						<view>
							<view v-if="item.JobInfo.Negotiable" class="money">可面议</view>
							<view v-else-if="item.JobInfo.MaxWage<=3000" class="money">{{numberFormat(item.JobInfo.MaxWage)}}以下</view>
							<view v-else class="money">
								{{ numberFormat(item.JobInfo.MinWage, true) }}~{{numberFormat(item.JobInfo.MaxWage)}}
							</view>
						</view>
					</view>
					<view class="view-info">
						<span class="spantext">{{ item.JobInfo.EducationDesc }}</span>
						<span class="spantext" v-if="item.JobInfo.Graduate">应届生</span>
						<span class="spantext" v-else-if="item.JobInfo.Student">在校生</span>
						<span class="spantext" v-else-if="item.JobInfo.MaxExperience>10">10年以上经验</span>
						<span class="spantext" v-else-if="item.JobInfo.MaxExperience<=1">1年以内经验</span>
						<span class="spantext" v-else>{{ item.JobInfo.MinExperience }}-{{
                item.JobInfo.MaxExperience}}年经验</span>
						<span class="spantext" v-if="item.JobInfo.WorkType == 0">全职</span>
						<span class="spantext" v-else-if="item.JobInfo.WorkType == 1">兼职</span>
						<span class="spantext" v-else>实习</span>
						<span class="spantext">招{{ item.JobInfo.Amount }}人</span>
					</view>
					<view class="view-info flexdagd">
						<u-tag :text="s.FullName" size="mini" borderColor="#F7F7F7" color="#666666" bgColor="#F7F7F7"
							plain v-for="(s, index) in item.JobInfo.Tags" :key="index" v-if="index<4"
							style="margin-right: 10rpx"></u-tag>
					</view>
					<!-- <u-divider text="" v-if="item.JobInfo.Tags.length > 0"></u-divider> -->
					<view class="view-info cop">
						<view class="cop-name">
							<image class="logo" :src="imgStr(item)"></image>

							<view class="stateCla">
								<view v-if="item.JobInfo.UserOnlineInfo">
									<view class="onlineStateCla" v-if="item.JobInfo.UserOnlineInfo.State == true">
									</view>
								</view>
								<view class="noOnlineStateCla" v-else></view>
							</view>
							<text class="span">{{ item.JobInfo.CorpName }}</text>
						</view>
						<view class="fl-t">
							<view class="pcaaddress">
								{{ item.JobInfo.PcaAddress }}
							</view>
						</view>
					</view>
				</view>
			</view>
			<u-loadmore :status="status"  style="padding-bottom: 40rpx;"/>
		</scroll-view>
		</view>
		
		<u-empty v-else mode="data" icon="/static/recruit/index/qsy.png" :width="windowWidth" marginTop="150">
		</u-empty>
	</view>
</template>
<script>
	import baseHead from "@/pages/component/baseHead.vue";
	export default {
		filters: {
			userNums(num) {
				return num < 10000 ? num : (num / 1000).toFixed(1) + "k";
			},
		},
		data() {
			return {
				URL: this.$config.domain.staticUrl,
				checked: 0,
				datalist: [],
				obj: {
					KeyWord: "",
					PageIndex: 1,
					PageSize: 10,
				},
				status: "loadmore",
				title: "",
				lists: [],
				lenChecked: 0,
				isShow: false,
				checkList: [],
				oldRadio: 0,
				statusBarH: '',
				windowHeight: '',
				windowWidth: '',
				triggered: false,
			};
		},
		//子组件
		components: {
			baseHead,
		},
		created() {
			this.listdata();
			const app = getApp()
			this.statusBarH = app.globalData.statusBarH //状态栏高度
			this.windowHeight = app.globalData.phoneInformation.windowHeight //屏幕高度
			this.windowWidth = app.globalData.phoneInformation.windowWidth
		},

		// 下拉刷新
		// onPullDownRefresh() {
		// 	this.obj = {
		// 		PageIndex: 1,
		// 		PageSize: 10,
		// 		KeyWord: "",
		// 	};
		// 	this.listdata();
		// 	uni.stopPullDownRefresh(); //停止刷新
		// },
		onPullDownRefresh() {
			console.log('refresh');
			this.obj = {
				PageIndex: 1,
				PageSize: 10,
				KeyWord: "",
			};
			this.listdata();
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		// 计算属性
		computed: {},
		// 计算方法
		methods: {
			ReachBottom() {
				// 加载前值为loadmore，加载中为loading，没有数据为nomore
				if (this.status != "nomore") {
					this.status = "loading";
					this.listdata();
				}
			},
			// 下拉刷新
			onRefresh() {
				this.triggered = true;
				setTimeout(() => {
					this.triggered = false;
					this.obj = {
						PageIndex: 1,
						PageSize: 10,
						KeyWord: "",
					};
					this.datalist=[]
					this.listdata();

				}, 2000)
			},
			// 下拉复位
			onRestore() {
				this.triggered = false; // 需要重置
				console.log("onRestore");
			},
			imgStr(item) {
				if (item.JobInfo.PublisherHeadIcon) {
					return this.URL + item.JobInfo.PublisherHeadIcon;
				} else {
					return "/static/assets/images/default-corp-logo.png";
				}
			},

			// 跳转详情
			JobDetails(item) {
				console.log(item);
				let id = item.JobId;
				uni.navigateTo({
					url: `/pages/views/packageA/type-jobhunting/search/JobDetails?id=` + id,
				});
			},
			numberFormat(num, val) {
				let newNum = num / 1000;
				newNum = newNum.toString();
				const index = newNum.indexOf(".");
				if (index !== -1) {
					if (!val) {
						return parseFloat(newNum).toFixed(1) + "k";
					} else {
						return parseFloat(newNum).toFixed(1);
					}
				} else {
					if (!val) {
						return parseFloat(newNum) + "k";
					} else {
						return parseFloat(newNum);
					}
				}
			},

			listdata(val) {
				this.$http.huirc
					.jobUserRecordlistByUser({
						PageIndex: this.obj.PageIndex,
						PageSize: this.obj.PageSize,
						HasChat: 1,
					})
					.then((res) => {
						if (res.Result) {
							if (this.obj.PageIndex == 1 && res.Result.Items.length == 0) {
								this.datalist = [];
							} else {
								if (res.Result.Items.length == 0) {
									// 没有数据----
									this.status = "nomore";
									return;
								}
								this.datalist = this.datalist
									.concat(res.Result.Items)
									.map((item) => {
										return {
											...item,
											checked: false,
										};
									});
							}
							if (res.Result.Items.length >= this.obj.PageSize) {
								this.obj.PageIndex++;
								// 表示还有数据
							} else {
								//没有更多数据了
								this.status = "nomore";
							}
						}
					});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.goutong {
		box-sizing: border-box;

	}
	

	.jiaonliguanli {
		background-color: #ffffff;
		margin: 20rpx 20rpx;
		box-sizing: border-box;
		padding: 0rpx;
		overflow: hidden;
		border-radius: 20rpx;

		.view-layout {
			// width: 100%;
			padding: 30rpx 20rpx;
			box-sizing: border-box;

			.view-right-top {
				// width: 100%;
				display: flex;
				justify-content: space-between;

				.name {
					font-size: 36rpx;
					font-weight: bold;
					color: #000000;

				}

				.money {
					margin-left: 20rpx;
					font-size: 34rpx;
					font-weight: 400;
					color: #F35370;
				}
			}

			.view-info {
				margin: 20rpx 0rpx;

				.spantext {
					font-size: 26rpx;
					font-weight: 400;
					color: #666666;
				}

				.cop-name {
					display: flex;
					align-items: center;
					position: relative;

					.span {
						// margin-left: 25rpx;
						color: #999999;
						font-size: 26rpx;
						font-weight: 500;
						color: #272636;

					}

					.logo {
						width: 42rpx;
						height: 42rpx;
						flex-shrink: 0;
						border-radius: 8rpx;
						margin-right: 20rpx;
						border: 1rpx solid rgba(112, 112, 112, 0.2);
					}

					.stateCla {
						position: absolute;
						left: 38rpx;
						top: 38rpx;

						.onlineStateCla {
							width: 12rpx;
							height: 12rpx;
							background-color: #14c88b;
							border-radius: 100%;
							float: right;
						}

						.noOnlineStateCla {
							width: 12rpx;
							height: 12rpx;
							background-color: #b2b6bf;
							border-radius: 100%;
							float: right;
						}
					}
				}

				.pcaaddress {
					color: #999999;
					font-size: 24rpx;
					font-weight: 400;
				}

				&.cop {
					display: flex;
					align-items: center;
					justify-content: space-between;
				}

				span {
					font-size: 24rpx;
					color: #313131;
					padding: 0 12rpx;
					line-height: 24rpx;
					margin-right: 20rpx;

					&:first-child {
						padding-left: 0;
					}

					&:last-child {
						border-right: 0;
					}
				}
			}

			.flexdagd {
				display: flex;
				justify-content: start;
				flex-wrap: wrap;
			}
		}
	}
</style>